<!DOCTYPE html>
<html>
  <head th:include="/common/head :: head"></head>
  <style>
		.check_box {
				width:20px;
				height:20px
		}
  </style>
  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">销售管理</a>
        <a><cite>机会管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="iconfont" style="line-height:30px">&#xe6aa;</i></a>
    </div>
    <div class="x-body" ng-app="listApp" ng-controller="listController">
	  <div class="layui-row" style="text-align:center">
	  <form class="layui-form layui-col-md12 x-so">
	      <div class="layui-inline">
	      	  <label>员工姓名&nbsp;:</label>
		      <div class="layui-input-inline">
					<select  id="createBy" name="createBy" lay-search="">
						<option value=""></option>
					</select>
			  </div>
	      </div>
     	  <button class="layui-btn btn_search" lay-submit="" lay-filter="sreach">
						<i class="layui-icon">&#xe615;</i>
		  </button>
	</form>
	  </div>
	      <xblock>
	        <button class="layui-btn" onclick="addChance('添加机会管理','/chance/chanceAdd.shtml',455,550)"><i class="layui-icon"></i>添加</button>
	        <button class="layui-btn" onclick="chance('修改机会','/chance/chanceUpdate.shtml',455,550)"><i class="layui-icon">&#xe642;</i>修改</button>
	        <button class="layui-btn" onclick="chance('查看详情','/chance/chanceQuery.shtml',455,550)"><i class="iconfont">&#xe806;</i>查看</button>
	        <button class="layui-btn" onclick="chance('分配机会','/chance/distribution.shtml',455,600)"><i class="iconfont">&#xe6ab;</i>分配</button>
	        <span class="x-right" style="line-height:40px" id="span_total"></span>
	      </xblock>
	      <table class="layui-table">
	        <thead>
	          <tr>
	          	<th></th>
	          	<th>ID</th>
	            <th>机会名称</th>
	            <th>机会类型</th>
	            <th>录入时间</th>
	            <th>录入人</th>
	         </thead>
	        <tbody>
	          <tr ng-repeat="chance in chanceList">
	          	<td>
	              <input type="checkbox" name="checkedChance" class="check_box childs_check" value="{{chance.id}}"/>
	            </td>
	            <td>{{chance.id}}</td>
	            <td>{{chance.chanceName}}</td>
	            <td>
	            	<span ng-if="chance.type==1">官网流量</span>
	            	<span ng-if="chance.type==2">转介绍</span>
	            	<span ng-if="chance.type==3">客户来访</span>
	            	<span ng-if="chance.type==4">媒体进线</span>
				</td>
	            <td>{{chance.createDate}}</td>
	            <td>{{chance.createBy}}</td>
	          </tr>
	        </tbody>
	      </table>		
		<div id="page"></div>
	</div>
  </body>
	<script type="text/javascript">
	//全局对象
	var _this = {size:5,current:1};
	angular.module("listApp",[]).controller("listController",function($scope){
		  _this.scope = $scope; 
  	})
	//搜索表单对象
	var formData={createBy:""};
	$(function(){
		//获取数据
		getData();
		//获取用户姓名、id列表
		getUserId();
		//绑定事件
  	  	bindEvent();
  	
	})
	//条件查询
	function bindEvent(){
		//查询按钮的绑定事件
		$(".btn_search").bind("click",function(){
			formData.createBy = $("#createBy").val();
			_this.current = 1;
			getData();
		})
	}
	//获取数据
	function getData(){
		$.post("/chance/getChanceList","pageNo="+_this.current+"&pageSize="+_this.size+"&createBy="+formData.createBy,function(result){
			if(result.data.pages!=0 && result.data.records.length==0){
				_this.current=result.data.pages;
				getData();
				return;
			}
			showData(result);
		})
			
	}
	//展示数据
	function showData(result){
		//展示
		layui.use(['laypage', 'layer'], function(){
			 laypage = layui.laypage;
			 laypage.render({   //设置基础参数
			  elem: 'page',        //指向存放分页的容器，值可以是容器ID、DOM对象
			  count: result.data.total,   //数据总数
			  layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
			  limits: [5,10, 20],    //每页条数的选择项
			  curr:_this.current,    //起始页
			  limit:_this.size,      //每页显示的条数
			  jump: function(obj,first){  //jump切换分页的回调
				  				//obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
				  if(!first){
					  _this.current = obj.curr;
					  _this.size = obj.limit;
					  getData();
				  }
			  }
			 });
		})
		//展示列表
		_this.scope.chanceList = result.data.records;
		_this.scope.$apply();
		//展示总条数
		$("#span_total").html("共有数据:"+result.data.total+"条");
	}
	//异步改为同步  async:false;
	//获取用户姓名、id列表
	function getUserId(){
		$.ajax({
			url:"/user/getUserIds",
			type:"post",
			async:false,
			success:function(result){
				if(result.status==0){
					showUserName(result);	
				}else{
					layer.msg(result.msg);
				}
			}	
		})
	}
	//展示下拉框
	function showUserName(result){
		var str= "";
		var list = result.data;
		for(i in list){
			str+="<option  value="+list[i].id+">"+list[i].userName+"</option>";
		}
		$("#createBy").append(str);
	}
	//查看、修改、分配 按钮
	function chance(title,url,w,h){
		var ids=0;
		var id="";
		var queryIds =document.getElementsByName("checkedChance");
		for( i in queryIds){
			if(queryIds[i].checked==true){
				ids+=1;
				if(ids>1){
					parent.layer.msg("最多查看一条记录");
					return ;
				}
				id = queryIds[i].value;
			}
		}
		if(id==""){
			parent.layer.msg("必须选中一条记录");
			return ;
		}
		sessionStorage.setItem("chanceId",id);
		parent.layer.open({
			type: 2,
	        area: [w+'px', h +'px'],
	        fix: false, //不固定
	        maxmin: true,
	        shadeClose: true,
	        shade:0.4,
	        title: title,
	        content: url,
	        end:function(){
	        	getData();
	        }
		})
	}
	//添加按钮
	function addChance(title,url,w,h){
		parent.layer.open({
			type: 2,
	        area: [w+'px', h +'px'],
	        fix: false, //不固定
	        maxmin: true,
	        shadeClose: true,
	        shade:0.4,
	        title: title,
	        content: url,
	        end:function(){
	        	getData();
	        }
		})
	}
	
	</script>
</html>